<template>
  <div class="workLife">
    <div class="row">
      <div class="col-md-2">
        <ul class="aside-left">
          <li @click="handleClick(index)" v-for="(item, index) in listArr" :key="index"
            :class="['list', 'aside-list', 'text-center', 'p-3', 'border-bottom', activeIndex == index ? 'active' : '']">
            {{ item.cate_name }}
          </li>
        </ul>
      </div>
      <div class="classify">
        <div class="box">
          <div>
            <i class="bi bi-blockquote-right"></i>
          </div>
          <ul class="p-2 rounded">
            <li @click="handleClick(index)" v-for="(item, index) in listArr" :key="index"
              :class="['list text-center p-2', activeIndex == index ? 'active' : '']">
              {{ item.cate_name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-10">
        <ListItem :articleArr=articleArr />
        <!-- <ListItem /> -->
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import ListItem from "@/component/ListItem.vue";
import { getAllArticle, getCateList } from "@/api/index"
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute()
// console.log(route.query.cate)
interface IArticleList {
  id: number;
  cate: string;
  cate_name: string;
  cate_url: string;
}
// 分类数组(一级分类)
const listArr = ref<IArticleList[]>([])
const activeIndex = ref<number>(0); //高亮索引

// 分类名称(二级分类)
const secondText = ref<string>('')
// 获取文章类型
const cate = ref<string>(route.query.cate ? route.query.cate.toString() : '')
// console.log('cate', cate.value)

watch(() => route.query.cate,
  (newval) => {
    cate.value = newval ? newval.toString() : ''
    // console.log('cate', cate.value)
    getCateListFn()
  })
// 获取左侧分类列表
const getCateListFn = async () => {
  await getCateList().then(
    res => {
      if (res.data.code == 200) {
        // console.log(res.data)
        const arr = res.data.result.filter((item: IArticleList) => {
          return cate.value == item.cate
        })
        // console.log(arr)
        listArr.value = arr

        // console.log(secondText.value)

        // 设置默认选中第一个
        if (listArr.value.length > 0) {
          const sessCate = JSON.parse(sessionStorage.getItem('cate') || '{}')
          if (sessCate && sessCate.cate_name) {
            const index = arr.findIndex((item: IArticleList) => item.cate_name == sessCate.cate_name)
            if (index > -1) {
              activeIndex.value = index
              // console.log(activeIndex.value)
              secondText.value = sessCate.cate_name
              return
            }
          }
          activeIndex.value = 0
          secondText.value = (listArr.value[0] ? listArr.value[0].cate_name : '')

        }
        // console.log(res.data)
      }
    },
    err => {
      console.log(err)
    }
  )
  getAllArticleFn()
}
getCateListFn()

interface IArticle {
  [key: string | number]: string | number
}
// 文章列表数组
const articleArr = ref<IArticle[]>([])

// console.log(cate.value)
// const page_num = ref<number>(1);
// const page_size = ref<number>(10);


// 获取文章列表数据
const getAllArticleFn = async () => {
  await getAllArticle().then(
    res => {
      // console.log('文章列表数据', res.data)
      if (res.data.code == 200) {
        // 处理文章数据
        const arr = res.data.result.filter((item: IArticle) => {
          return cate.value == item.cate
        })
        const arr2 = arr.filter((item: IArticle) => {
          return item.cate_name == secondText.value
        })
        articleArr.value = arr2
        // console.log(arr2)
      }
      // console.log("文章列表", res.data)
    },
    errr => {
      console.log(errr)
    }
  )
}



// 点击获取二级分类名称以及索引
const handleClick = (index: number) => {
  activeIndex.value = index;
  secondText.value = listArr.value[index] ? listArr.value[index].cate_name : '';

  // 保存当前的选择
  sessionStorage.setItem('cate', JSON.stringify(listArr.value[index]))
  getAllArticleFn()
}

</script>

<style lang="less" scoped>
@media (max-width: 768px) {
  .row {
    .col-md-2 {
      display: none;
    }
  }

  .classify {
    display: block !important;
  }
}

@media (max-width:630px) {
  .classify {
    top: 60px !important;
    transform: none !important;
  }
}

.classify {
  width: 70px;
  height: 45px;
  display: none;
  position: sticky;
  top: 10px;
  margin-left: auto;
  margin-bottom: 10px;
  // transform: translate(-45px, 55px);
  // margin-top: 20px;
  z-index: 999;

  &:hover {
    .box ul {
      display: block;
    }
  }

  .box {
    width: 45px;
    height: 45px;
    position: relative;
    background-color: #fff;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    i {
      width: 45px;
      height: 45px;
      text-align: center;
      font-size: 30px;
    }

    ul {
      width: 130px;
      background-color: #fff;
      display: none;
      position: absolute;
      top: 0px;
      right: 50px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

      li {
        width: 100%;
        transition: all 0.5s ease;
        cursor: pointer;

        &.active {
          border-radius: 10px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        &:hover {
          border-radius: 10px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}

.aside-list {
  cursor: pointer;
  transition: all 0.5s ease;

  &:hover {
    background-color: #f5f5f5;
    border-radius: 10px;
  }

  &.active {
    background-color: #f5f5f5;
    border-radius: 10px;
  }
}

.workLife {
  animation: move 1s ease-in-out;
}

@keyframes move {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(0);
  }
}
</style>
